﻿
<style>
    #content {
        width: 100%;
        height: 1000px;
        margin-left: auto;
        margin-right: auto;
    }

    #right {
        width: 200px;
        height: 500px;
        background-color: black;
    }

    .col1 {
        margin-left: 30px;
        background-color: green;
        float: left;
        width: 30%;
        height: 200px;
    }
    .col2{
         margin-top: 100px;
        margin-left: 30px;
        background-color: green;
        float: left;
        width: 30%;
        height: 200px;   
    }

    .shakira-box {
        width: 100%;
        height: 300px;
        overflow: hidden;
    }

        .shakira-box img {
            width: 100%;
            height: 100%;
        }

        .shakira-box .shakira-content {
            width: 100%;
            height: 120px;
            top: -40px;
            position: relative;
            background-color: rgba(0,0,0,0.6);
            color: #FFF;
        }

        .shakira-box .shakira-header {
            height: 40px;
            margin: 0;
            font-size: 24pt;
            padding: 0 5px;
        }

        .shakira-box:hover .shakira-content {
            top: -120px;
        }

        .shakira-box .shakira-content {
            width: 100%;
            height: 120px;
            top: -40px;
            position: relative;
            background-color: rgba(0,0,0,0.6);
            color: #FFF;
            transition: top 0.5s;
            -moz-transition: top 0.5s;
            -webkit-transition: top 0.5s;
            -o-transition: top 0.5s;
            -ms-transition: top 0.5s;
        }

    #addtocart {
        background-color: white;
        color: black;
    }
</style>

<head>
    <title>Hive Shop</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="~/engine1/style.css" />
    <script type="text/javascript" src="~/engine1/jquery.js"></script>
    <link href="~/CSS/Index.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="main">
        <div id="head">


            <div id="wowslider-container1">
                <div class="ws_images">
                    <ul>
                        <li><img src="~/data1/images/adidas_running.jpg" alt="Adidas Running" title="Adidas Running" id="wows1_0" /></li>
                        <li><img src="~/data1/images/nike_jordan_air_max.jpg" alt="Nike Jordan Air Max" title="Nike Jordan Air Max" id="wows1_1" /></li>
                        <li><img src="~/data1/images/puma_speed_cat.jpg" alt="full screen slider" title="Puma Speed Cat" id="wows1_2" /></li>
                        <li><img src="~/data1/images/vans_authentic_schuhe_schwarz.jpg" alt="Vans Authentic Schuhe Schwarz" title="Vans Authentic Schuhe Schwarz" id="wows1_3" /></li>
                    </ul>
                </div>
                <div class="ws_bullets">
                    <div>
                        <a href="#" title="Adidas Running"><img src="~/data1/tooltips/adidas_running.jpg" alt="Adidas Running" />1</a>
                        <a href="#" title="Nike Jordan Air Max"><img src="~/data1/tooltips/nike_jordan_air_max.jpg" alt="Nike Jordan Air Max" />2</a>
                        <a href="#" title="Puma Speed Cat"><img src="~/data1/tooltips/puma_speed_cat.jpg" alt="Puma Speed Cat" />3</a>
                        <a href="#" title="Vans Authentic Schuhe Schwarz"><img src="~/data1/tooltips/vans_authentic_schuhe_schwarz.jpg" alt="Vans Authentic Schuhe Schwarz" />4</a>
                    </div>
                </div><span class="wsl"><a href="http://wowslider.com/vu">image carousel</a> by WOWSlider.com v7.2</span>
                <div class="ws_shadow"></div>
            </div>
            <script type="text/javascript" src="~/engine1/wowslider.js"></script>
            <script type="text/javascript" src="~/engine1/script.js"></script>


            <div class="row" align="center">
                @foreach (var item in ViewBag.Category)
                {
                    <div class="col-md-4" style="background-color:white;border-style:solid">

                        <a href="~/Home/Category?cid=@item.CategoryId">
                            <img src="~/Images/@item.Image" />
                        </a>
                    </div>
                }
            </div>
        </div>
    </div>
    <hr />
    <div id="content">
        <h1>Top Selling Shoes</h1>
        <div class="col1">
            <div class="shakira-box">
                    <img src="~/Images/sneaker.jpg">
                <div class="shakira-content">
                    <h2 class="shakira-header">Sneaker Adidas</h2>
                    <p class="shakir-body">Text is available under the Creative Commons Attribution-ShareAlike License; additional terms may </p>
                    <b style="float:left">Price: 100$</b>
                    <a style="float:right" id="addtocart" href="https://www.google.com.vn/">Add To Cart <img src="~/Images/addicon.png" style="width:20px; height:20px; float:right " id="addicon" /></a>
                </div>
            </div>
        </div>
        <div class="col1">
            <div class="shakira-box">
                <img src="~/Images/sneaker.jpg">
                <div class="shakira-content">
                    <h2 class="shakira-header">Sneaker Adidas</h2>
                    <p class="shakir-body">Text is available under the Creative Commons Attribution-ShareAlike License; additional terms may </p>
                    <b style="float:left">Price: 120$</b>
                    <a style="float:right" id="addtocart" href="https://www.google.com.vn/">Add To Cart <img src="~/Images/addicon.png" style="width:20px; height:20px; float:right " id="addicon" /></a>
                </div>
            </div>
        </div>
        <div class="col1">
            <div class="shakira-box">
                <img src="~/Images/sneaker.jpg">
                <div class="shakira-content">
                    <h2 class="shakira-header">Sneaker Adidas</h2>
                    <p class="shakir-body">Text is available under the Creative Commons Attribution-ShareAlike License; additional terms may </p>
                    <b style="float:left">Price: 130$</b>
                    <a style="float:right" id="addtocart" href="https://www.google.com.vn/">Add To Cart <img src="~/Images/addicon.png" style="width:20px; height:20px; float:right " id="addicon" /></a>
                </div>
            </div>
        </div>
        <div class="col2">
            <div class="shakira-box">
                <img src="~/Images/sneaker.jpg">
                <div class="shakira-content">
                    <h2 class="shakira-header">Sneaker Adidas</h2>
                    <p class="shakir-body">Text is available under the Creative Commons Attribution-ShareAlike License; additional terms may </p>
                    <b style="float:left">Price: 100$</b>
                    <a style="float:right" id="addtocart" href="https://www.google.com.vn/">Add To Cart <img src="~/Images/addicon.png" style="width:20px; height:20px; float:right " id="addicon" /></a>
                </div>
            </div>
        </div>
        <div class="col2">
            <div class="shakira-box">
                <img src="~/Images/sneaker.jpg">
                <div class="shakira-content">
                    <h2 class="shakira-header">Sneaker Adidas</h2>
                    <p class="shakir-body">Text is available under the Creative Commons Attribution-ShareAlike License; additional terms may </p>
                    <b style="float:left">Price: 100$</b>
                    <a style="float:right" id="addtocart" href="https://www.google.com.vn/">Add To Cart <img src="~/Images/addicon.png" style="width:20px; height:20px; float:right " id="addicon" /></a>
                </div>
            </div>
        </div>
        <div class="col2">
            <div class="shakira-box">
                <img src="~/Images/sneaker.jpg">
                <div class="shakira-content">
                    <h2 class="shakira-header">Sneaker Adidas</h2>
                    <p class="shakir-body">Text is available under the Creative Commons Attribution-ShareAlike License; additional terms may </p>
                    <b style="float:left">Price: 100$</b>
                    <a style="float:right" id="addtocart" href="https://www.google.com.vn/">Add To Cart <img src="~/Images/addicon.png" style="width:20px; height:20px; float:right " id="addicon" /></a>
                </div>
            </div>
        </div>
        <div class="col2">
            <div class="shakira-box">
                <img src="~/Images/sneaker.jpg">
                <div class="shakira-content">
                    <h2 class="shakira-header">Sneaker Adidas</h2>
                    <p class="shakir-body">Text is available under the Creative Commons Attribution-ShareAlike License; additional terms may </p>
                    <b style="float:left">Price: 100$</b>
                    <a style="float:right" id="addtocart" href="https://www.google.com.vn/">Add To Cart <img src="~/Images/addicon.png" style="width:20px; height:20px; float:right " id="addicon" /></a>
                </div>
            </div>
        </div>
        <div class="col2">
            <div class="shakira-box">
                <img src="~/Images/sneaker.jpg">
                <div class="shakira-content">
                    <h2 class="shakira-header">Sneaker Adidas</h2>
                    <p class="shakir-body">Text is available under the Creative Commons Attribution-ShareAlike License; additional terms may </p>
                    <b style="float:left">Price: 100$</b>
                    <a style="float:right" id="addtocart" href="https://www.google.com.vn/">Add To Cart <img src="~/Images/addicon.png" style="width:20px; height:20px; float:right " id="addicon" /></a>
                </div>
            </div>
        </div>
        <div class="col2">
            <div class="shakira-box">
                <img src="~/Images/sneaker.jpg">
                <div class="shakira-content">
                    <h2 class="shakira-header">Sneaker Adidas</h2>
                    <p class="shakir-body">Text is available under the Creative Commons Attribution-ShareAlike License; additional terms may </p>
                    <b style="float:left">Price: 100$</b>
                    <a style="float:right" id="addtocart" href="https://www.google.com.vn/">Add To Cart <img src="~/Images/addicon.png" style="width:20px; height:20px; float:right " id="addicon" /></a>
                </div>
            </div>
        </div>
    </div>
    <footer style="padding-top:100px;">
        <hr />
        <p>Hôm nay ngày @DateTime.Now.Day-@DateTime.Now.Month-@DateTime.Now.Year</p>
    </footer>
</body>
